import { useEffect, useMemo, useRef, useContext, useState } from 'react'
import SchemaForm from '../../FormDesigner/SchemaForm'
import { complexObj } from './propertyFormConfig'
import ProcessEditorContext from '../context'
import { getObjValue } from '../utils'

const getFormItem = (el) => {
  const commonProps = {
    name: el.key,
    label: el.title,
  }
  switch (el.type) {
    case 'boolean':
      return {
        ...commonProps,
        type: 'boolean'
      };
    case 'text':
      return {
        ...commonProps,
        type: 'textarea'
      }
    case 'flowable-multiinstance':
      return {
        ...commonProps,
        type: 'select',
        inputProps: {
          options: ['none', 'Parallel', 'Sequential'].map(el => ({ value: el, label: el }))
        }
      }
    case 'flowable-processhistorylevel':
      return {
        ...commonProps,
        type: 'select',
        inputProps: {
          options: [
            { value: 'none', label: 'none' },
            { value: 'activity', label: 'activity' },
            { value: 'audit', label: 'audit' },
            { value: 'full', label: 'full' }
          ]
        }
      }
    case 'complex':
    case 'multiplecomplex':
      return {
        ...commonProps,
        ...complexObj[el.key]
      }
    default:
      return {
        ...commonProps,
        type: 'textChangeByBlur'
      }
  }
}

const Property = () => {

  const [selectedItem, setSelectedItem] = useState({})
  const { selectedShape, handleChangeProperty } = useContext(ProcessEditorContext)

  useEffect(() => {
    if (selectedShape) {
      var stencil = selectedShape.getStencil();
      var properties = stencil.properties();

      let selectedItem = {
        title: '',
        properties: []
      };

      for (let property of properties) {
        if (property.popular() === false) continue;
        var key = property.prefix() + "-" + property.id()
        if (key === 'oryx-name') {
          selectedItem.title = selectedShape.properties.get(key);
        }
        var _item = {
          'key': key,
          'title': getObjValue(window.lang, property.title()),
          'description': property.description(),
          'type': property.type(),
          'mode': 'read',
          'hidden': property.isHidden(),
          'value': selectedShape.properties.get(key)
        }
        selectedItem.properties.push(_item)
      }
      setSelectedItem(selectedItem)
    } else {
      setSelectedItem({})
    }
  }, [selectedShape])

  const formRef = useRef(null)

  useEffect(() => {
    if (formRef.current) {
      formRef.current.setFieldsValue({})
      let values = {}
      if (selectedItem.properties) {
        for (let item of selectedItem.properties) {
          values[item.key] = item.value
        }
      }
      formRef.current.setFieldsValue(values)
    }
  }, [selectedItem])

  const formItems = useMemo(() => {
    return selectedItem.properties ? selectedItem.properties.map(el => {
      return getFormItem(el)
    }) : []
  }, [selectedItem])

  return <div className="p-d-property p-d-panel">
    <div className="p-d-panel-head">{selectedItem.title}</div>
    <div className="p-d-panel-body p-d-form">
      <SchemaForm
        layout="vertical"
        labelCol={{ span: 24 }}
        wrapperCol={{ span: 24 }}
        size="small"
        ref={formRef}
        formItems={formItems}
        onValuesChange={(values) => {
          handleChangeProperty(values)
        }}
      ></SchemaForm>
    </div>
  </div>
}

export default Property